<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-row layui-col-space30 layui-col-xs6 layui-col-md3" id="demo-box">
    <div >
        <div class="layui-panel">
            <ul class="layui-menu" id="classification">
                <li lay-options="{id: 100,title:'A'}">
                    <div class="layui-menu-body-title">马克思主义、列宁主义、毛泽东思想、邓小平理论</div>
                </li>
                <li lay-options="{id: 101,title:'B'}">
                    <div class="layui-menu-body-title">哲学、宗教</div>
                </li>
                <li lay-options="{id: 102,title:'C'}">
                    <div class="layui-menu-body-title">社会科学总论</div>
                </li>
                <li lay-options="{id: 103,title:'D'}">
                    <div class="layui-menu-body-title">政治、法律</div>
                </li>
                <li lay-options="{id: 104,title:'E'}">
                    <div class="layui-menu-body-title">军事</div>
                </li>
                <li lay-options="{id: 105,title:'F'}">
                    <div class="layui-menu-body-title">经济</div>
                </li>
                <li lay-options="{id: 106,title:'G'}">
                    <div class="layui-menu-body-title">文化、科学、教育、体育</div>
                </li>
                <li lay-options="{id: 107,title:'H'}">
                    <div class="layui-menu-body-title">语言、文字</div>
                </li>
                <li lay-options="{id: 108,title:'I'}">
                    <div class="layui-menu-body-title">文学</div>
                </li>
                <li lay-options="{id: 109,title:'J'}">
                    <div class="layui-menu-body-title">艺术</div>
                </li>
                <li lay-options="{id: 110,title:'K'}">
                    <div class="layui-menu-body-title">历史、地理</div>
                </li>
                <li lay-options="{id: 111,title:'N'}">
                    <div class="layui-menu-body-title">自然科学总论</div>
                </li>
                <li lay-options="{id: 112,title:'O'}">
                    <div class="layui-menu-body-title">数理科学和化学</div>
                </li>
                <li lay-options="{id: 113,title:'P'}">
                    <div class="layui-menu-body-title">天文学、地球科学</div>
                </li>
                <li lay-options="{id: 114,title:'Q'}">
                    <div class="layui-menu-body-title">生物科学</div>
                </li>
                <li lay-options="{id: 115,title:'R'}">
                    <div class="layui-menu-body-title">医药、卫生</div>
                </li>
                <li lay-options="{id: 116,title:'S'}">
                    <div class="layui-menu-body-title">农业科学</div>
                </li>
                <li lay-options="{id: 117,title:'T'}">
                    <div class="layui-menu-body-title">工业技术</div>
                </li>
                <li lay-options="{id: 118,title:'U'}">
                    <div class="layui-menu-body-title">交通运输</div>
                </li>
                <li lay-options="{id: 119,title:'V'}">
                    <div class="layui-menu-body-title">航空、航天</div>
                </li>
                <li lay-options="{id: 120,title:'X'}">
                    <div class="layui-menu-body-title">环境科学、安全科学</div>
                </li>
                <li lay-options="{id: 121,title:'Z'}">
                    <div class="layui-menu-body-title">综合性图书</div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="layui-col-xs12 layui-col-md9">
    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    <script type="text/html" id="currentTableBar">
        <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="detail">详情</a>
        <a class="layui-btn layui-btn-warm layui-btn-xs data-count-edit" lay-event="borrow">借阅与预约</a>
<!--        <a class="layui-btn layui-btn-danger layui-btn-xs data-count-edit" lay-event="detail">预约</a>-->
    </script>
</div>

<script src="/js/lay-module/layuimini/miniPage.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['dropdown', 'util', 'table', 'miniPage'], function(){
        var dropdown = layui.dropdown
            ,util = layui.util
            ,$ = layui.jquery,
            table = layui.table,
            miniPage = layui.miniPage;

        //菜单点击事件
        dropdown.on('click(classification)', function(options){
            var thisElem = $(this);
            console.log(thisElem, options);
            var table = layui.table;
            var type = options.title;
            table.render({
                elem: '#currentTableId',
                url: '/visitorBooksInfo?type='+type,
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [
                    [
                        {field: 'id', width: 80, title: '编号', sort: true},
                        {field: 'name', width: 280, title: '书名', sort: true},
                        {field: 'alias', width: 280, title: '别名', sort: true},
                        {field: 'author', width: 150,title: '作者', sort: true},
                        {field: 'publishingHouse', width: 150, title: '出版社', sort: true},
                        {field: 'score', width: 80, title: '评分', minWidth: 40, sort: true},
                        {title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}]
                ],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });
        });
        table.render({
            elem: '#currentTableId',
            url: '/visitorBooksInfo',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                    {field: 'id', width: 80, title: '编号', sort: true},
                    {field: 'name', width: 280, title: '书名', sort: true},
                    {field: 'alias', width: 280, title: '别名', sort: true},
                    {field: 'author', width: 150,title: '作者', sort: true},
                    {field: 'publishingHouse', width: 150, title: '出版社', sort: true},
                    {field: 'score', width: 80, title: '评分', minWidth: 40, sort: true},
                    {title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}]
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'

        });
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                var content = miniPage.getHrefContent('/borrowerBooksDetail?id='+data.id);
                var index = layer.open({
                    title: data.name,
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['85%','75%'],
                    content: content,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }else if (obj.event === 'borrow') {
                var content = miniPage.getHrefContent('/borrowBook?bookName='+data.name);
                var index = layer.open({
                    title: data.name,
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%','100%'],
                    content: content,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        });
        util.event('lay-active', {
            normal: function(){
                $('#demo-box').children().addClass('layui-col-md3').removeClass('layui-col-md4');
                $('#demo-box').find('.layui-menu').removeClass('layui-menu-lg');
            }
            ,lg: function(){
                $('#demo-box').children().addClass('layui-col-md4').removeClass('layui-col-md3')
                $('#demo-box').find('.layui-menu').addClass('layui-menu-lg');
            }
        });
    });

</script>

</body>
</html>